<template>
	<view class="registration-form-page">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title" style="text-align: center;">肃北县2024年春节期间农民工动态监测调查问卷</view>
			<view style="font-size: 12px;margin: 20px 0;">
				您好!肃北县就业服务中心为及时准确掌握春节期间农民工返乡返岗和外出务工情况，正在对我县农民工外出务工及返乡情况开展调查问卷，为进一步为农民工精准施策和完善就业帮扶政策提供决策支持。调查资料将会严格保密，研究结果会以综合数据的形式展现，不涉及任何个人信息，请放心填写。衷心感谢您对我们工作的宝贵支持!
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>1.您的家乡所以在地是：</view>
				<view class="form-content">
					<view class="form1">
						<uni-section title="家乡" type="line" padding class="form-ctrl" style="width: 100%;">
							<uni-data-picker placeholder="请选择您的家乡" popup-title="请选择家乡" :localdata="areaList"
								:map="listMap" v-model="form.areaid" @change="onchange" @nodeclick="onnodeclick"
								@popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
						</uni-section>
						<view class="iconfont text"></view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>2.您的户口类型</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="domicile" range-key="value" :value="domicileIndex"
						@change="bindPicker($event,'domicile')">
						{{form.domicile==0 ? "请选择户籍类型" : domicile[domicileIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>3.您的性别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="sex" range-key="value" :value="sexIndex"
						@change="bindPicker($event,'sex')">
						{{form.sex==0 ? "请选择性别" : sex[sexIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>4.您的年龄</view>
				<view class="form-content">
					<input v-model.trim="form.age" maxlength="20" type="text" placeholder="请输入年龄"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>5.您的受教育情况</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="education" range-key="value" :value="educationIndex"
						@change="bindPicker($event,'education')">
						{{form.education==0 ? "请选择您的受教育情况" : education[educationIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>6.您的技能等级是</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="skillLevel" range-key="value" :value="skillLevelIndex"
						@change="bindPicker($event,'skillLevel')">
						{{form.skillLevel==0 ? "请选择您的技能等级" : skillLevel[skillLevelIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>7.您家庭之前是建档立卡贫困户么？</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="difficulty" range-key="value" :value="difficultyIndex"
						@change="bindPicker($event,'difficulty')">
						{{form.difficulty==0 ? "请选择是否建档立卡贫困户" : difficulty[difficultyIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>8.2023年，您总共外出务工大约几个月？（出本乡镇即为外出、读书、办事、求医、旅游等不算务工）。
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="workTime" range-key="value" :value="workTimeIndex"
						@change="bindPicker($event,'workTime')">
						{{form.workTime==0 ? "请选择您总共外出务工大约几个月" : workTime[workTimeIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>9.外出务工，您是自己一个人到务工地，还是和家人一起？
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="isFamily" range-key="value" :value="isFamilyIndex"
						@change="bindPicker($event,'isFamily')">
						{{form.isFamily==0 ? "请选择您是自己一个人到务工地，还是和家人一起" : isFamily[isFamilyIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>9.您当前所在地属于
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="address" range-key="value" :value="addressIndex"
						@change="bindPicker($event,'address')">
						{{form.address==0 ? "请选择您当前所在地属于" : address[addressIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>10.您全部劳动收入约为？
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="workFeel" range-key="value" :value="workFeelIndex"
						@change="bindPicker($event,'workFeel')">
						{{form.workFeel==0 ? "请选择您全部劳动收入约为" : workFeel[workFeelIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>11.2023年，您全部劳动收入约为？
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="income" range-key="value" :value="incomeIndex"
						@change="bindPicker($event,'income')">
						{{form.income==0 ? "请选择您全部劳动收入约为" : income[incomeIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>12.与2022年相比，您2023年劳动收入的变化情况市：
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="incomeReduce" range-key="value" :value="incomeReduceIndex"
						@change="bindPicker($event,'incomeReduce')">
						{{form.incomeReduce==0 ? "请选择与2022年相比，您2023年劳动收入的变化情况：" : incomeReduce[incomeReduceIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>13.您当前所在的具体地点是：</view>
				<view class="form-content">
					<view class="form1">
						<uni-section title="具体地点" type="line" padding class="form-ctrl" style="width: 100%;">
							<uni-data-picker placeholder="请选择您所在的具体地点" popup-title="请选择具体地点" :localdata="areaList"
								:map="listMap" v-model="form.addressType" @change="onchange" @nodeclick="onnodeclick"
								@popupopened="onpopupopened" @popupclosed="onpopupclosed">
							</uni-data-picker>
						</uni-section>
						<view class="iconfont text"></view>
					</view>
				</view>
			</view>

			<view class="form-item">
				<view class="form-label"><text class="require"></text>14.您当前的工作情况是
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="workState" range-key="value" :value="workStateIndex"
						@change="bindPicker($event,'workState')">
						{{form.workState==0 ? "请选择与2022年相比，您2023年劳动收入的变化情况：" : workState[workStateIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>15.2024年春节后您还打算外出务工么？
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="goOut" range-key="value" :value="goOutIndex"
						@change="bindPicker($event,'goOut')">
						{{form.goOut==0 ? "请选择与2022年相比，您2023年劳动收入的变化情况：" : goOut[goOutIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>16.外出务工从事的行业属于？
				</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="workIndustry" range-key="value" :value="workIndustryIndex"
						@change="bindPicker($event,'workIndustry')">
						{{form.workIndustry==0 ? "请选择外出务工从事的行业" : workIndustry[workIndustryIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require"></text>17.您对政府关于外出务工人员或反乡人员的这昂测及服务还有那些建议？</view>
				<view class="form-content">
					<input v-model.trim="form.reconmendation" maxlength="200" type="text" placeholder="请输入您的建议"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>

		</view>
		<view class="btn" @click="submit">提交问卷</view>
	</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		getProvinceListApi,
		insertReturnHomeApi
	} from '@/api/registration.js'
	export default {
		components: {
			// MultipleCheckbox
		},
		data() {
			return {
				listMap: {
					text: 'data',
					value: 'code',
					children: 'sonList'
				},
				areaList: [],
				form: {
					areaid: '',
					domicile: '',
					sex: '',
					age: '',
					education: '',
					skillLevel: '',
					difficulty: '',
					workTime: '',
					isFamily: '',
					address: '',
					workFeel: 0,
					income: '',
					incomeReduce: '',
					workState: '',
					goOut: '',
					workIndustry: '',
					reconmendation: '',
					addressType: ''
				},
				rules: {
					areaid: {
						name: '家乡',
						required: true,
					},
					age: {
						name: '年龄',
						required: true
					},
					sex: {
						name: '性别',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择性别')
							}
							callback();
						}
					},
					domicile: {
						name: '户籍类型',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择户籍类型')
							}
							callback();
						}
					},
					education: {
						name: '受教育情况',
						required: true,
					},
					skillLevel: {
						name: '技能等级',
						required: true,
					},
					difficulty: {
						name: '是否建档立卡贫困户',
						required: true,
					},
					workTime: {
						name: '外出务工时间',
						required: true,
					},
					isFamilyIndex: {
						name: '外出务工人员',
						required: true,
					},
					address: {
						name: '当前所在地',
						required: true,
					},
					workFeel: {
						name: '务工所在地的感受',
						required: true,
					},
					income: {
						name: '劳动收入',
						required: true,
					},
					incomeReduce: {
						name: '2022年与2023年收入比较',
						required: true,
					},
					workState: {
						name: '春节后还打算外出务工吗',
						required: true,
					},
					addressType: {
						name: '具体地点',
						required: true,
					}
				},
				area: [{
						id: 1,
						value: '肃州区'
					},
					{
						id: 2,
						value: '金塔县'
					},
					{
						id: 3,
						value: '敦煌市'
					},
					{
						id: 4,
						value: '瓜州县'
					},
					{
						id: 5,
						value: '玉门市'
					},
					{
						id: 6,
						value: '肃北蒙古族自治县'
					},
					{
						id: 7,
						value: '阿克塞哈萨克族自治县'
					},
					{
						id: 8,
						value: '职业技术学院'
					}
				],
				areaIndex: 0,

				sex: [{
					id: 1,
					value: '①男'
				}, {
					id: 2,
					value: '②女'
				}],
				sexIndex: 0,
				domicile: [{
					id: 1,
					value: '①农村'
				}, {
					id: 2,
					value: '②城镇'
				}, ],
				domicileIndex: 0,
				education: [{
					id: 1,
					value: '①小学及以下'
				}, {
					id: 2,
					value: '②初中'
				}, {
					id: 3,
					value: '③高中'
				}, {
					id: 4,
					value: '④中专、职高、技校'
				}, {
					id: 5,
					value: '⑤大专、高职、技师院校'
				}, {
					id: 6,
					value: '⑥本科及以上'
				}, ],
				educationIndex: 0,
				skillLevel: [{
					id: 1,
					value: '①初级工'
				}, {
					id: 2,
					value: '②中级工'
				}, {
					id: 3,
					value: '③高级工'
				}, {
					id: 4,
					value: '④技师'
				}, {
					id: 5,
					value: '⑤高级技师'
				}, {
					id: 6,
					value: '⑥没有证书，但有一定技能'
				}, {
					id: 7,
					value: '⑦没有证书也没有技能'
				}, ],
				skillLevelIndex: 0,
				difficulty: [{
					id: 1,
					value: '①是'
				}, {
					id: 2,
					value: '②否'
				}, ],
				difficultyIndex: 0,
				workTime: [{
					id: 1,
					value: '①不到3个月'
				}, {
					id: 2,
					value: '②4-6个月'
				}, {
					id: 3,
					value: '③7-9个月'
				}, {
					id: 4,
					value: '④10-12个月'
				}, {
					id: 5,
					value: '⑤一直没有外出务工'
				}, ],
				workTimeIndex: 0,
				isFamily: [{
					id: 1,
					value: '①自己一人'
				}, {
					id: 2,
					value: '②家人一起'
				}, ],
				isFamilyIndex: 0,
				address: [{
					id: 1,
					value: '①外省市'
				}, {
					id: 2,
					value: '②老家所在省的其他城市'
				}, {
					id: 3,
					value: '③老家所在市的其他区县'
				}, {
					id: 4,
					value: '④老家所在县城'
				}, {
					id: 5,
					value: '⑤老家乡镇'
				}, {
					id: 6,
					value: '⑥老家乡村'
				}, ],
				addressIndex: 0,
				workFeel: [{
					id: 1,
					value: '①非常安心、方便、舒适'
				}, {
					id: 2,
					value: '②比较安心、方便、舒适'
				}, {
					id: 3,
					value: '③安心、方便、舒适度一般'
				}, {
					id: 4,
					value: '④不太安心、方便、舒适'
				}, {
					id: 5,
					value: '⑤非常不安心、方便、舒适'
				}, ],
				workFeelIndex: 0,
				income: [{
						id: 1,
						value: '①不到1万元'
					}, {
						id: 2,
						value: '②1-3万元（含1万元整）'
					}, {
						id: 3,
						value: '③3-5万元（含3万元整）'
					}, {
						id: 4,
						value: '④5-8万元（含5万元整）'
					}, {
						id: 5,
						value: '⑤8-10万元（含8万元整）'
					}, {
						id: 6,
						value: '⑥10-15万元（含10万元整）'
					}, {
						id: 7,
						value: '⑦15-20万元（含15万元整）'
					},
					{
						id: 8,
						value: '⑧20万元伊莎昂'
					},
				],
				incomeIndex: 0,
				incomeReduce: [{
						id: 1,
						value: '①减少三成（含）以上'
					}, {
						id: 2,
						value: '②减少两（含）至三成'
					}, {
						id: 3,
						value: '③减少一（含）至两成'
					}, {
						id: 4,
						value: '④减少不到一成'
					}, {
						id: 5,
						value: '⑤基本没有变化'
					}, {
						id: 6,
						value: '⑥增加不到一成'
					}, {
						id: 7,
						value: '⑦增加一（含）至两成'
					},
					{
						id: 8,
						value: '⑧增加两（含）至三成'
					}, {
						id: 9,
						value: '⑦增加三成（含）以上'
					},
					{
						id: 10,
						value: '⑧2022年没有外出务工'
					},
				],
				incomeReduceIndex: 0,
				workState: [{
					id: 1,
					value: '①有工作（包括灵活就业和创业）'
				}, {
					id: 2,
					value: '②没有工作，正在找工作'
				}, {
					id: 3,
					value: '③没有工作，也没有找工作'
				}, ],
				workStateIndex: 0,
				goOut: [{
					id: 1,
					value: '①会'
				}, {
					id: 2,
					value: '②不会'
				}, {
					id: 3,
					value: '③看情况'
				}, ],
				workIndustry:[{
					id: 1,
					value: '①建筑业'
				}, {
					id: 2,
					value: '②制造业'
				}, {
					id: 3,
					value: '③采掘业'
				},
				 {
				 	id: 4,
				 	value: '④建材业'
				 },
				 {
				 	id: 5,
				 	value: '⑤服务业'
				 },
				 {
				 	id: 6,
				 	value: '⑥其他'
				 },],
				goOutIndex: 0,
				workIndustryIndex: 0,

			}
		},
		methods: {
			onchange(e) {
				console.log('onchange:', e);
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			bindTownship(township, key) {
				this.$set(this.form, key, township);
			},
			getList() {
				getProvinceListApi({}).then((res) => {
					this.areaList = res ?? [];
				})
			},

			bindPicker(e, key, rangeKey = '') {
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].value);
				if (this.form.domicile !== '其他（请说明）') {
					this.form.domicileIllustrate = ''
				}
			},
			submit() {
				let form = JSON.parse(JSON.stringify(this.form))
				if (validate(form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					console.log(form)
					insertReturnHomeApi(form).then(() => {
						this.showToast('提交成功,感谢您的参与', () => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						})
					})
				}
			},
		},
		onLoad() {
			this.getList()
		}

	}
</script>

<style lang="scss">
	page {
		background: #F7F6F9;
	}

	.registration-form-page {
		width: 100%;
		padding: 30rpx 30rpx 150rpx 30rpx;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF0014;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item:last-child {
				border-bottom: none;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					font-weight: bold;

					.require {
						color: red;
					}
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 120rpx;
						margin-right: 20rpx;
					}

					.form1 {
						flex-direction: row;
						align-items: center;
						width: 100%;
						margin-right: 20rpx;
					}


					.form-ctrl {

						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.form-ctrl1 {
						height: 80rpx;
						line-height: 80rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}

					.text {
						flex-grow: 0;
						color: #242424;
						font-size: 26rpx;
						width: 70rpx;
					}
				}
			}
		}
	}
</style>
